<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3651093" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon billkes">&#xe676;</span>
                <div class="name">饮料-Drink</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe67b;</span>
                <div class="name">果酱-Jam</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe606;</span>
                <div class="name">苹果</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe608;</span>
                <div class="name">青椒</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe60d;</span>
                <div class="name">牛奶</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe60e;</span>
                <div class="name">面包</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe610;</span>
                <div class="name">章鱼</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe611;</span>
                <div class="name">螃蟹</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe617;</span>
                <div class="name">鲜鱼</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe61a;</span>
                <div class="name">茄子</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe621;</span>
                <div class="name">三文鱼</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe623;</span>
                <div class="name">西瓜</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe625;</span>
                <div class="name">火龙果</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe62f;</span>
                <div class="name">菠萝</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe64f;</span>
                <div class="name">桃子</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe650;</span>
                <div class="name">香蕉</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe651;</span>
                <div class="name">草莓</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe654;</span>
                <div class="name">车厘子</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe685;</span>
                <div class="name">杨桃</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a5;</span>
                <div class="name">白菜</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe613;</span>
                <div class="name">withdraw</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xec32;</span>
                <div class="name">增加图层</div>
                <div class="code-name">&amp;#xec32;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6eb;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xf820;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xf820;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe630;</span>
                <div class="name">开心果</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe631;</span>
                <div class="name">核桃</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe632;</span>
                <div class="name">夏威夷果</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe633;</span>
                <div class="name">花生</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe634;</span>
                <div class="name">碧根果</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe636;</span>
                <div class="name">松子</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe638;</span>
                <div class="name">巴旦木</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe639;</span>
                <div class="name">腰果</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe63a;</span>
                <div class="name">蛋黄酥</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe63b;</span>
                <div class="name">蛋糕</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe63c;</span>
                <div class="name">饼干</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe63d;</span>
                <div class="name">布丁</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe63e;</span>
                <div class="name">糖果</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe63f;</span>
                <div class="name">巧克力</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe640;</span>
                <div class="name">红枣</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe641;</span>
                <div class="name">蚕豆</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe642;</span>
                <div class="name">葡萄干</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe643;</span>
                <div class="name">蔓越莓</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe695;</span>
                <div class="name">寿司</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe698;</span>
                <div class="name">肘子</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe699;</span>
                <div class="name">冰沙</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe69a;</span>
                <div class="name">酸奶</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe69b;</span>
                <div class="name">披萨</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe69c;</span>
                <div class="name">海星</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe69d;</span>
                <div class="name">海蜇</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe69e;</span>
                <div class="name">铜锣烧</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe69f;</span>
                <div class="name">糯米糍</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a0;</span>
                <div class="name">矿泉水</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a2;</span>
                <div class="name">茶</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a3;</span>
                <div class="name">章鱼小丸子</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a4;</span>
                <div class="name">橙汁</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a6;</span>
                <div class="name">荷包蛋</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6a7;</span>
                <div class="name">冰糖葫芦</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6ac;</span>
                <div class="name">蜂蜜</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6ad;</span>
                <div class="name">鲱鱼罐头</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6ae;</span>
                <div class="name">生煎</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6af;</span>
                <div class="name">油条</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b0;</span>
                <div class="name">鱼子酱</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b1;</span>
                <div class="name">竹筒饭</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b2;</span>
                <div class="name">豆浆</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b3;</span>
                <div class="name">三明治</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b4;</span>
                <div class="name">泡芙</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b5;</span>
                <div class="name">扇贝</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b6;</span>
                <div class="name">蛋糕卷</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b7;</span>
                <div class="name">伏特加</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b8;</span>
                <div class="name">黄油</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6b9;</span>
                <div class="name">香肠</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6ba;</span>
                <div class="name">班戟</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6bb;</span>
                <div class="name">蛋挞</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6bc;</span>
                <div class="name">青柠</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6bd;</span>
                <div class="name">辣椒</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6be;</span>
                <div class="name">柿子</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6bf;</span>
                <div class="name">莫吉托</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c1;</span>
                <div class="name">葡萄酒</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c2;</span>
                <div class="name">口香糖</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c3;</span>
                <div class="name">香草冰淇淋</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c4;</span>
                <div class="name">饺子</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c5;</span>
                <div class="name">提拉米苏</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c6;</span>
                <div class="name">火锅</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c7;</span>
                <div class="name">红薯</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c8;</span>
                <div class="name">冰块</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6c9;</span>
                <div class="name">棉花糖</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6ca;</span>
                <div class="name">刨冰</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6cb;</span>
                <div class="name">美式咖啡</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6cc;</span>
                <div class="name">馒头</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6cd;</span>
                <div class="name">汽水</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6ce;</span>
                <div class="name">橄榄</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6cf;</span>
                <div class="name">鸡肉卷</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe6d0;</span>
                <div class="name">果冻</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe657;</span>
                <div class="name">咖啡</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe658;</span>
                <div class="name">薯条</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe659;</span>
                <div class="name">珍珠奶茶</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe65a;</span>
                <div class="name">雪糕</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe65b;</span>
                <div class="name">奶酪</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe65c;</span>
                <div class="name">可乐</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe65d;</span>
                <div class="name">甜筒</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe65e;</span>
                <div class="name">汉堡</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe65f;</span>
                <div class="name">蟹籽寿司</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe660;</span>
                <div class="name">爆米花</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe661;</span>
                <div class="name">热狗</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe662;</span>
                <div class="name">马卡龙</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe663;</span>
                <div class="name">天妇罗</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe689;</span>
                <div class="name">泡面</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe68d;</span>
                <div class="name">甜甜圈</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe68e;</span>
                <div class="name">薯片</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe68f;</span>
                <div class="name">华夫饼</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon billkes">&#xe690;</span>
                <div class="name">棒棒糖</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'billkes';
  src: url('iconfont.svg?t=1664101056306#billkes') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.billkes {
  font-family: "billkes" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="billkes"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"billkes" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon billkes id-Drink"></span>
            <div class="name">
              饮料-Drink
            </div>
            <div class="code-name">.id-Drink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-Jam"></span>
            <div class="name">
              果酱-Jam
            </div>
            <div class="code-name">.id-Jam
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-pingguo"></span>
            <div class="name">
              苹果
            </div>
            <div class="code-name">.id-pingguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-qingjiao"></span>
            <div class="name">
              青椒
            </div>
            <div class="code-name">.id-qingjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-niunai"></span>
            <div class="name">
              牛奶
            </div>
            <div class="code-name">.id-niunai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-mianbao"></span>
            <div class="name">
              面包
            </div>
            <div class="code-name">.id-mianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-zhangyu"></span>
            <div class="name">
              章鱼
            </div>
            <div class="code-name">.id-zhangyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-pangxie"></span>
            <div class="name">
              螃蟹
            </div>
            <div class="code-name">.id-pangxie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xianyu"></span>
            <div class="name">
              鲜鱼
            </div>
            <div class="code-name">.id-xianyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-qiezi"></span>
            <div class="name">
              茄子
            </div>
            <div class="code-name">.id-qiezi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-sanwenyu"></span>
            <div class="name">
              三文鱼
            </div>
            <div class="code-name">.id-sanwenyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xigua"></span>
            <div class="name">
              西瓜
            </div>
            <div class="code-name">.id-xigua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-huolongguo"></span>
            <div class="name">
              火龙果
            </div>
            <div class="code-name">.id-huolongguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-boluo"></span>
            <div class="name">
              菠萝
            </div>
            <div class="code-name">.id-boluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-taozi"></span>
            <div class="name">
              桃子
            </div>
            <div class="code-name">.id-taozi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xiangjiao"></span>
            <div class="name">
              香蕉
            </div>
            <div class="code-name">.id-xiangjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-caomei"></span>
            <div class="name">
              草莓
            </div>
            <div class="code-name">.id-caomei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-chelizi"></span>
            <div class="name">
              车厘子
            </div>
            <div class="code-name">.id-chelizi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-yangtao"></span>
            <div class="name">
              杨桃
            </div>
            <div class="code-name">.id-yangtao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-baicai"></span>
            <div class="name">
              白菜
            </div>
            <div class="code-name">.id-baicai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-withdraw"></span>
            <div class="name">
              withdraw
            </div>
            <div class="code-name">.id-withdraw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-zengjiatuceng"></span>
            <div class="name">
              增加图层
            </div>
            <div class="code-name">.id-zengjiatuceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-A"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.id-A
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.id-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-kaixinguo"></span>
            <div class="name">
              开心果
            </div>
            <div class="code-name">.id-kaixinguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-hetao"></span>
            <div class="name">
              核桃
            </div>
            <div class="code-name">.id-hetao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xiaweiyiguo"></span>
            <div class="name">
              夏威夷果
            </div>
            <div class="code-name">.id-xiaweiyiguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-huasheng"></span>
            <div class="name">
              花生
            </div>
            <div class="code-name">.id-huasheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-bigenguo"></span>
            <div class="name">
              碧根果
            </div>
            <div class="code-name">.id-bigenguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-songzi"></span>
            <div class="name">
              松子
            </div>
            <div class="code-name">.id-songzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-badanmu"></span>
            <div class="name">
              巴旦木
            </div>
            <div class="code-name">.id-badanmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-yaoguo"></span>
            <div class="name">
              腰果
            </div>
            <div class="code-name">.id-yaoguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-danhuangsu"></span>
            <div class="name">
              蛋黄酥
            </div>
            <div class="code-name">.id-danhuangsu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-dangao"></span>
            <div class="name">
              蛋糕
            </div>
            <div class="code-name">.id-dangao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-binggan"></span>
            <div class="name">
              饼干
            </div>
            <div class="code-name">.id-binggan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-buding"></span>
            <div class="name">
              布丁
            </div>
            <div class="code-name">.id-buding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-tangguo"></span>
            <div class="name">
              糖果
            </div>
            <div class="code-name">.id-tangguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-qiaokeli"></span>
            <div class="name">
              巧克力
            </div>
            <div class="code-name">.id-qiaokeli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-hongzao"></span>
            <div class="name">
              红枣
            </div>
            <div class="code-name">.id-hongzao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-candou"></span>
            <div class="name">
              蚕豆
            </div>
            <div class="code-name">.id-candou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-putaogan"></span>
            <div class="name">
              葡萄干
            </div>
            <div class="code-name">.id-putaogan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-manyuemei"></span>
            <div class="name">
              蔓越莓
            </div>
            <div class="code-name">.id-manyuemei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-shousi"></span>
            <div class="name">
              寿司
            </div>
            <div class="code-name">.id-shousi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-zhouzi"></span>
            <div class="name">
              肘子
            </div>
            <div class="code-name">.id-zhouzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-bingsha"></span>
            <div class="name">
              冰沙
            </div>
            <div class="code-name">.id-bingsha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-suannai"></span>
            <div class="name">
              酸奶
            </div>
            <div class="code-name">.id-suannai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-pisa"></span>
            <div class="name">
              披萨
            </div>
            <div class="code-name">.id-pisa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-haixing"></span>
            <div class="name">
              海星
            </div>
            <div class="code-name">.id-haixing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-haizhe"></span>
            <div class="name">
              海蜇
            </div>
            <div class="code-name">.id-haizhe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-tongluoshao"></span>
            <div class="name">
              铜锣烧
            </div>
            <div class="code-name">.id-tongluoshao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-nuomici"></span>
            <div class="name">
              糯米糍
            </div>
            <div class="code-name">.id-nuomici
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-kuangquanshui"></span>
            <div class="name">
              矿泉水
            </div>
            <div class="code-name">.id-kuangquanshui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-cha"></span>
            <div class="name">
              茶
            </div>
            <div class="code-name">.id-cha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-zhangyuxiaowanzi"></span>
            <div class="name">
              章鱼小丸子
            </div>
            <div class="code-name">.id-zhangyuxiaowanzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-chengzhi"></span>
            <div class="name">
              橙汁
            </div>
            <div class="code-name">.id-chengzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-hebaodan"></span>
            <div class="name">
              荷包蛋
            </div>
            <div class="code-name">.id-hebaodan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-bingtanghulu"></span>
            <div class="name">
              冰糖葫芦
            </div>
            <div class="code-name">.id-bingtanghulu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-fengmi"></span>
            <div class="name">
              蜂蜜
            </div>
            <div class="code-name">.id-fengmi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-feiyuguantou"></span>
            <div class="name">
              鲱鱼罐头
            </div>
            <div class="code-name">.id-feiyuguantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-shengjian"></span>
            <div class="name">
              生煎
            </div>
            <div class="code-name">.id-shengjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-youtiao"></span>
            <div class="name">
              油条
            </div>
            <div class="code-name">.id-youtiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-yuzijiang"></span>
            <div class="name">
              鱼子酱
            </div>
            <div class="code-name">.id-yuzijiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-zhutongfan"></span>
            <div class="name">
              竹筒饭
            </div>
            <div class="code-name">.id-zhutongfan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-doujiang"></span>
            <div class="name">
              豆浆
            </div>
            <div class="code-name">.id-doujiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-sanmingzhi"></span>
            <div class="name">
              三明治
            </div>
            <div class="code-name">.id-sanmingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-paofu"></span>
            <div class="name">
              泡芙
            </div>
            <div class="code-name">.id-paofu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-shanbei"></span>
            <div class="name">
              扇贝
            </div>
            <div class="code-name">.id-shanbei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-dangaojuan"></span>
            <div class="name">
              蛋糕卷
            </div>
            <div class="code-name">.id-dangaojuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-futejia"></span>
            <div class="name">
              伏特加
            </div>
            <div class="code-name">.id-futejia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-huangyou"></span>
            <div class="name">
              黄油
            </div>
            <div class="code-name">.id-huangyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xiangchang"></span>
            <div class="name">
              香肠
            </div>
            <div class="code-name">.id-xiangchang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-banji"></span>
            <div class="name">
              班戟
            </div>
            <div class="code-name">.id-banji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-danta"></span>
            <div class="name">
              蛋挞
            </div>
            <div class="code-name">.id-danta
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-qingning"></span>
            <div class="name">
              青柠
            </div>
            <div class="code-name">.id-qingning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-lajiao"></span>
            <div class="name">
              辣椒
            </div>
            <div class="code-name">.id-lajiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-shizi"></span>
            <div class="name">
              柿子
            </div>
            <div class="code-name">.id-shizi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-mojituo"></span>
            <div class="name">
              莫吉托
            </div>
            <div class="code-name">.id-mojituo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-putaojiu"></span>
            <div class="name">
              葡萄酒
            </div>
            <div class="code-name">.id-putaojiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-kouxiangtang"></span>
            <div class="name">
              口香糖
            </div>
            <div class="code-name">.id-kouxiangtang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xiangcaobingqilin"></span>
            <div class="name">
              香草冰淇淋
            </div>
            <div class="code-name">.id-xiangcaobingqilin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-jiaozi"></span>
            <div class="name">
              饺子
            </div>
            <div class="code-name">.id-jiaozi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-tilamisu"></span>
            <div class="name">
              提拉米苏
            </div>
            <div class="code-name">.id-tilamisu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-huoguo"></span>
            <div class="name">
              火锅
            </div>
            <div class="code-name">.id-huoguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-hongshu"></span>
            <div class="name">
              红薯
            </div>
            <div class="code-name">.id-hongshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-bingkuai"></span>
            <div class="name">
              冰块
            </div>
            <div class="code-name">.id-bingkuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-mianhuatang"></span>
            <div class="name">
              棉花糖
            </div>
            <div class="code-name">.id-mianhuatang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-paobing"></span>
            <div class="name">
              刨冰
            </div>
            <div class="code-name">.id-paobing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-meishikafei"></span>
            <div class="name">
              美式咖啡
            </div>
            <div class="code-name">.id-meishikafei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-mantou"></span>
            <div class="name">
              馒头
            </div>
            <div class="code-name">.id-mantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-qishui"></span>
            <div class="name">
              汽水
            </div>
            <div class="code-name">.id-qishui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-ganlan"></span>
            <div class="name">
              橄榄
            </div>
            <div class="code-name">.id-ganlan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-jiroujuan"></span>
            <div class="name">
              鸡肉卷
            </div>
            <div class="code-name">.id-jiroujuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-guodong"></span>
            <div class="name">
              果冻
            </div>
            <div class="code-name">.id-guodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-kafei"></span>
            <div class="name">
              咖啡
            </div>
            <div class="code-name">.id-kafei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-shutiao"></span>
            <div class="name">
              薯条
            </div>
            <div class="code-name">.id-shutiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-zhenzhunaicha"></span>
            <div class="name">
              珍珠奶茶
            </div>
            <div class="code-name">.id-zhenzhunaicha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xuegao"></span>
            <div class="name">
              雪糕
            </div>
            <div class="code-name">.id-xuegao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-nailao"></span>
            <div class="name">
              奶酪
            </div>
            <div class="code-name">.id-nailao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-kele"></span>
            <div class="name">
              可乐
            </div>
            <div class="code-name">.id-kele
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-tiantong"></span>
            <div class="name">
              甜筒
            </div>
            <div class="code-name">.id-tiantong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-hanbao"></span>
            <div class="name">
              汉堡
            </div>
            <div class="code-name">.id-hanbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-xiezishousi"></span>
            <div class="name">
              蟹籽寿司
            </div>
            <div class="code-name">.id-xiezishousi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-baomihua"></span>
            <div class="name">
              爆米花
            </div>
            <div class="code-name">.id-baomihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-regou"></span>
            <div class="name">
              热狗
            </div>
            <div class="code-name">.id-regou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-makalong"></span>
            <div class="name">
              马卡龙
            </div>
            <div class="code-name">.id-makalong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-tianfuluo"></span>
            <div class="name">
              天妇罗
            </div>
            <div class="code-name">.id-tianfuluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-paomian"></span>
            <div class="name">
              泡面
            </div>
            <div class="code-name">.id-paomian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-tiantianquan"></span>
            <div class="name">
              甜甜圈
            </div>
            <div class="code-name">.id-tiantianquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-shupian"></span>
            <div class="name">
              薯片
            </div>
            <div class="code-name">.id-shupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-huafubing"></span>
            <div class="name">
              华夫饼
            </div>
            <div class="code-name">.id-huafubing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon billkes id-bangbangtang"></span>
            <div class="name">
              棒棒糖
            </div>
            <div class="code-name">.id-bangbangtang
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="billkes id-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            billkes" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-Drink"></use>
                </svg>
                <div class="name">饮料-Drink</div>
                <div class="code-name">#id-Drink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-Jam"></use>
                </svg>
                <div class="name">果酱-Jam</div>
                <div class="code-name">#id-Jam</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-pingguo"></use>
                </svg>
                <div class="name">苹果</div>
                <div class="code-name">#id-pingguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-qingjiao"></use>
                </svg>
                <div class="name">青椒</div>
                <div class="code-name">#id-qingjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-niunai"></use>
                </svg>
                <div class="name">牛奶</div>
                <div class="code-name">#id-niunai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-mianbao"></use>
                </svg>
                <div class="name">面包</div>
                <div class="code-name">#id-mianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-zhangyu"></use>
                </svg>
                <div class="name">章鱼</div>
                <div class="code-name">#id-zhangyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-pangxie"></use>
                </svg>
                <div class="name">螃蟹</div>
                <div class="code-name">#id-pangxie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xianyu"></use>
                </svg>
                <div class="name">鲜鱼</div>
                <div class="code-name">#id-xianyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-qiezi"></use>
                </svg>
                <div class="name">茄子</div>
                <div class="code-name">#id-qiezi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-sanwenyu"></use>
                </svg>
                <div class="name">三文鱼</div>
                <div class="code-name">#id-sanwenyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xigua"></use>
                </svg>
                <div class="name">西瓜</div>
                <div class="code-name">#id-xigua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-huolongguo"></use>
                </svg>
                <div class="name">火龙果</div>
                <div class="code-name">#id-huolongguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-boluo"></use>
                </svg>
                <div class="name">菠萝</div>
                <div class="code-name">#id-boluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-taozi"></use>
                </svg>
                <div class="name">桃子</div>
                <div class="code-name">#id-taozi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xiangjiao"></use>
                </svg>
                <div class="name">香蕉</div>
                <div class="code-name">#id-xiangjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-caomei"></use>
                </svg>
                <div class="name">草莓</div>
                <div class="code-name">#id-caomei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-chelizi"></use>
                </svg>
                <div class="name">车厘子</div>
                <div class="code-name">#id-chelizi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-yangtao"></use>
                </svg>
                <div class="name">杨桃</div>
                <div class="code-name">#id-yangtao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-baicai"></use>
                </svg>
                <div class="name">白菜</div>
                <div class="code-name">#id-baicai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-withdraw"></use>
                </svg>
                <div class="name">withdraw</div>
                <div class="code-name">#id-withdraw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-zengjiatuceng"></use>
                </svg>
                <div class="name">增加图层</div>
                <div class="code-name">#id-zengjiatuceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-A"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#id-A</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#id-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-kaixinguo"></use>
                </svg>
                <div class="name">开心果</div>
                <div class="code-name">#id-kaixinguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-hetao"></use>
                </svg>
                <div class="name">核桃</div>
                <div class="code-name">#id-hetao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xiaweiyiguo"></use>
                </svg>
                <div class="name">夏威夷果</div>
                <div class="code-name">#id-xiaweiyiguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-huasheng"></use>
                </svg>
                <div class="name">花生</div>
                <div class="code-name">#id-huasheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-bigenguo"></use>
                </svg>
                <div class="name">碧根果</div>
                <div class="code-name">#id-bigenguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-songzi"></use>
                </svg>
                <div class="name">松子</div>
                <div class="code-name">#id-songzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-badanmu"></use>
                </svg>
                <div class="name">巴旦木</div>
                <div class="code-name">#id-badanmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-yaoguo"></use>
                </svg>
                <div class="name">腰果</div>
                <div class="code-name">#id-yaoguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-danhuangsu"></use>
                </svg>
                <div class="name">蛋黄酥</div>
                <div class="code-name">#id-danhuangsu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-dangao"></use>
                </svg>
                <div class="name">蛋糕</div>
                <div class="code-name">#id-dangao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-binggan"></use>
                </svg>
                <div class="name">饼干</div>
                <div class="code-name">#id-binggan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-buding"></use>
                </svg>
                <div class="name">布丁</div>
                <div class="code-name">#id-buding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-tangguo"></use>
                </svg>
                <div class="name">糖果</div>
                <div class="code-name">#id-tangguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-qiaokeli"></use>
                </svg>
                <div class="name">巧克力</div>
                <div class="code-name">#id-qiaokeli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-hongzao"></use>
                </svg>
                <div class="name">红枣</div>
                <div class="code-name">#id-hongzao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-candou"></use>
                </svg>
                <div class="name">蚕豆</div>
                <div class="code-name">#id-candou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-putaogan"></use>
                </svg>
                <div class="name">葡萄干</div>
                <div class="code-name">#id-putaogan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-manyuemei"></use>
                </svg>
                <div class="name">蔓越莓</div>
                <div class="code-name">#id-manyuemei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-shousi"></use>
                </svg>
                <div class="name">寿司</div>
                <div class="code-name">#id-shousi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-zhouzi"></use>
                </svg>
                <div class="name">肘子</div>
                <div class="code-name">#id-zhouzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-bingsha"></use>
                </svg>
                <div class="name">冰沙</div>
                <div class="code-name">#id-bingsha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-suannai"></use>
                </svg>
                <div class="name">酸奶</div>
                <div class="code-name">#id-suannai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-pisa"></use>
                </svg>
                <div class="name">披萨</div>
                <div class="code-name">#id-pisa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-haixing"></use>
                </svg>
                <div class="name">海星</div>
                <div class="code-name">#id-haixing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-haizhe"></use>
                </svg>
                <div class="name">海蜇</div>
                <div class="code-name">#id-haizhe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-tongluoshao"></use>
                </svg>
                <div class="name">铜锣烧</div>
                <div class="code-name">#id-tongluoshao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-nuomici"></use>
                </svg>
                <div class="name">糯米糍</div>
                <div class="code-name">#id-nuomici</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-kuangquanshui"></use>
                </svg>
                <div class="name">矿泉水</div>
                <div class="code-name">#id-kuangquanshui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-cha"></use>
                </svg>
                <div class="name">茶</div>
                <div class="code-name">#id-cha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-zhangyuxiaowanzi"></use>
                </svg>
                <div class="name">章鱼小丸子</div>
                <div class="code-name">#id-zhangyuxiaowanzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-chengzhi"></use>
                </svg>
                <div class="name">橙汁</div>
                <div class="code-name">#id-chengzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-hebaodan"></use>
                </svg>
                <div class="name">荷包蛋</div>
                <div class="code-name">#id-hebaodan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-bingtanghulu"></use>
                </svg>
                <div class="name">冰糖葫芦</div>
                <div class="code-name">#id-bingtanghulu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-fengmi"></use>
                </svg>
                <div class="name">蜂蜜</div>
                <div class="code-name">#id-fengmi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-feiyuguantou"></use>
                </svg>
                <div class="name">鲱鱼罐头</div>
                <div class="code-name">#id-feiyuguantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-shengjian"></use>
                </svg>
                <div class="name">生煎</div>
                <div class="code-name">#id-shengjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-youtiao"></use>
                </svg>
                <div class="name">油条</div>
                <div class="code-name">#id-youtiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-yuzijiang"></use>
                </svg>
                <div class="name">鱼子酱</div>
                <div class="code-name">#id-yuzijiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-zhutongfan"></use>
                </svg>
                <div class="name">竹筒饭</div>
                <div class="code-name">#id-zhutongfan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-doujiang"></use>
                </svg>
                <div class="name">豆浆</div>
                <div class="code-name">#id-doujiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-sanmingzhi"></use>
                </svg>
                <div class="name">三明治</div>
                <div class="code-name">#id-sanmingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-paofu"></use>
                </svg>
                <div class="name">泡芙</div>
                <div class="code-name">#id-paofu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-shanbei"></use>
                </svg>
                <div class="name">扇贝</div>
                <div class="code-name">#id-shanbei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-dangaojuan"></use>
                </svg>
                <div class="name">蛋糕卷</div>
                <div class="code-name">#id-dangaojuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-futejia"></use>
                </svg>
                <div class="name">伏特加</div>
                <div class="code-name">#id-futejia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-huangyou"></use>
                </svg>
                <div class="name">黄油</div>
                <div class="code-name">#id-huangyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xiangchang"></use>
                </svg>
                <div class="name">香肠</div>
                <div class="code-name">#id-xiangchang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-banji"></use>
                </svg>
                <div class="name">班戟</div>
                <div class="code-name">#id-banji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-danta"></use>
                </svg>
                <div class="name">蛋挞</div>
                <div class="code-name">#id-danta</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-qingning"></use>
                </svg>
                <div class="name">青柠</div>
                <div class="code-name">#id-qingning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-lajiao"></use>
                </svg>
                <div class="name">辣椒</div>
                <div class="code-name">#id-lajiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-shizi"></use>
                </svg>
                <div class="name">柿子</div>
                <div class="code-name">#id-shizi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-mojituo"></use>
                </svg>
                <div class="name">莫吉托</div>
                <div class="code-name">#id-mojituo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-putaojiu"></use>
                </svg>
                <div class="name">葡萄酒</div>
                <div class="code-name">#id-putaojiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-kouxiangtang"></use>
                </svg>
                <div class="name">口香糖</div>
                <div class="code-name">#id-kouxiangtang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xiangcaobingqilin"></use>
                </svg>
                <div class="name">香草冰淇淋</div>
                <div class="code-name">#id-xiangcaobingqilin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-jiaozi"></use>
                </svg>
                <div class="name">饺子</div>
                <div class="code-name">#id-jiaozi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-tilamisu"></use>
                </svg>
                <div class="name">提拉米苏</div>
                <div class="code-name">#id-tilamisu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-huoguo"></use>
                </svg>
                <div class="name">火锅</div>
                <div class="code-name">#id-huoguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-hongshu"></use>
                </svg>
                <div class="name">红薯</div>
                <div class="code-name">#id-hongshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-bingkuai"></use>
                </svg>
                <div class="name">冰块</div>
                <div class="code-name">#id-bingkuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-mianhuatang"></use>
                </svg>
                <div class="name">棉花糖</div>
                <div class="code-name">#id-mianhuatang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-paobing"></use>
                </svg>
                <div class="name">刨冰</div>
                <div class="code-name">#id-paobing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-meishikafei"></use>
                </svg>
                <div class="name">美式咖啡</div>
                <div class="code-name">#id-meishikafei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-mantou"></use>
                </svg>
                <div class="name">馒头</div>
                <div class="code-name">#id-mantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-qishui"></use>
                </svg>
                <div class="name">汽水</div>
                <div class="code-name">#id-qishui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-ganlan"></use>
                </svg>
                <div class="name">橄榄</div>
                <div class="code-name">#id-ganlan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-jiroujuan"></use>
                </svg>
                <div class="name">鸡肉卷</div>
                <div class="code-name">#id-jiroujuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-guodong"></use>
                </svg>
                <div class="name">果冻</div>
                <div class="code-name">#id-guodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-kafei"></use>
                </svg>
                <div class="name">咖啡</div>
                <div class="code-name">#id-kafei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-shutiao"></use>
                </svg>
                <div class="name">薯条</div>
                <div class="code-name">#id-shutiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-zhenzhunaicha"></use>
                </svg>
                <div class="name">珍珠奶茶</div>
                <div class="code-name">#id-zhenzhunaicha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xuegao"></use>
                </svg>
                <div class="name">雪糕</div>
                <div class="code-name">#id-xuegao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-nailao"></use>
                </svg>
                <div class="name">奶酪</div>
                <div class="code-name">#id-nailao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-kele"></use>
                </svg>
                <div class="name">可乐</div>
                <div class="code-name">#id-kele</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-tiantong"></use>
                </svg>
                <div class="name">甜筒</div>
                <div class="code-name">#id-tiantong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-hanbao"></use>
                </svg>
                <div class="name">汉堡</div>
                <div class="code-name">#id-hanbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-xiezishousi"></use>
                </svg>
                <div class="name">蟹籽寿司</div>
                <div class="code-name">#id-xiezishousi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-baomihua"></use>
                </svg>
                <div class="name">爆米花</div>
                <div class="code-name">#id-baomihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-regou"></use>
                </svg>
                <div class="name">热狗</div>
                <div class="code-name">#id-regou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-makalong"></use>
                </svg>
                <div class="name">马卡龙</div>
                <div class="code-name">#id-makalong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-tianfuluo"></use>
                </svg>
                <div class="name">天妇罗</div>
                <div class="code-name">#id-tianfuluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-paomian"></use>
                </svg>
                <div class="name">泡面</div>
                <div class="code-name">#id-paomian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-tiantianquan"></use>
                </svg>
                <div class="name">甜甜圈</div>
                <div class="code-name">#id-tiantianquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-shupian"></use>
                </svg>
                <div class="name">薯片</div>
                <div class="code-name">#id-shupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-huafubing"></use>
                </svg>
                <div class="name">华夫饼</div>
                <div class="code-name">#id-huafubing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#id-bangbangtang"></use>
                </svg>
                <div class="name">棒棒糖</div>
                <div class="code-name">#id-bangbangtang</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
